
<template>
  <div class="footer">
    <div class="footer-main">
      <div class="footer-left">
      </div>
      <div class="footer-mid">
        <div class="mid1">
          <img src="@/assets/images/logo.png" />
          福州市中小企业数字化转型公共服务平台
        </div>
        <div class="mid2">
          <div class="mid-info">地址：仓山区南江滨西大道193号东部商务办公区5号楼6层</div>
          <div class="mid-info">电话：(0591)83258525</div>
        </div>
        <div class="mid3">
          <div class="mid-info">工作时间：8:30-18:00（工作日）</div>
          <div class="mid-info">邮箱：fzzxqyfw@163.com</div>
        </div>
      </div>
      <div class="footer-right">
        <img src="@/assets/images/ewm.jpg" />
        <label>扫码关注公众号</label>
      </div>
    </div>
  </div>
</template>
<script >

</script>
<style lang="scss" scoped>
.footer {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-template-areas: 'footer-main';
  grid-area: footer;
  background: #256db0;

  .footer-main {
    display: grid;
    grid-template-columns: 2.7fr 0.3fr;
    grid-template-rows: 1fr;
    gap: 0px 20px;
    grid-template-areas: 'footer-mid footer-right';
    grid-area: footer-main;
    width: 1200px;
    margin: 24px auto;
  }

  .footer-left {
    grid-area: footer-left;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .footer-right {
    grid-area: footer-right;
    display: flex;
    flex-direction: column;
    color: #ffffff;
    justify-content: center;
    align-items: center;

    img {
      width: 90px;
    }

    label {
      margin-top: 10px;
      font-size: 12px;
    }
  }

  .footer-mid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 0fr 0.3fr 0.3fr;
    gap: 20px 0px;
    grid-template-areas:
      'mid1'
      'mid2'
      'mid3';
    grid-area: footer-mid;
    color: #ffffff;
    img {
      width: 100px;
    }
    .mid-info {
      width: 60%;
    }

    a {
      color: #ffffff;
      text-decoration: none;
      position: absolute;
      right: 0;
    }
  }

  .mid1 {
    grid-area: mid1;
    display: flex;
    align-items: center;
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 3px;
    padding-bottom: 10px;
    border-bottom: 1px #bbbbbb40 solid;
  }

  .mid2 {
    grid-area: mid2;
    display: flex;
    flex-direction: row;
    position: relative;
  }

  .mid3 {
    grid-area: mid3;
    display: flex;
    flex-direction: row;
    position: relative;
  }
}
</style>